<template>
  <el-form-item label="上传模板">
    <el-upload
      v-model:file-list="optionModel.uploadTemplate"
      class="upload-demo"
      accept=".xlsx, .xls"
      :action="getGlobalDsv().uploadURL"
      :headers="getGlobalDsv().headers"
      :before-upload="beforeFileUpload"
      :on-success="handleFileUpload"
      :on-error="handleUploadError"
      :limit="1"
    >
      <el-button type="primary" :disabled="optionModel.uploadTemplate.length">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">请上传xls/xlsx格式且小于5M的模板文件</div>
      </template>
    </el-upload>
  </el-form-item>
</template>

<script>
import i18n from "@/utils/i18n"
import { deepClone } from "@/utils/util";

export default {
  name: "uploadTemplate-editor",
  mixins: [i18n],
  inject: ['getGlobalDsv'],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    beforeFileUpload(file) {

      let fileSizeCheckResult = false
      let uploadFileMaxSize = 5  //5MB
      fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
      if (!fileSizeCheckResult) {
        this.$message.error(this.i18nt('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
        return false;
      }
      // if (file.type !== 'xls' || file.type !== 'xlsx') {
      //   this.$message.error('请上传xls/xlsx格式的模板文件')
      //   return false
      // }
      return true
    },
    handleFileUpload(res, file, fileList) {
      console.log(res, file, fileList,455444)
      if (file.status === 'success') {
        file.name = file.name || res.data.fileName
        file.url = file.url || res.data.url
        this.optionModel.uploadTemplate = deepClone(fileList)
      }
    },
    handleUploadError(err, file, fileList) {
      this.$message({
        message: this.i18nt('render.hint.uploadError') + err,
        duration: 3000,
        type: 'error',
      })
    },
  }
}
</script>

<style scoped></style>